<template>
  <div class="sample-index">

    <div class="bread-wrap">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>
          <i class="iconfont icon-yangbenku"></i> 学生画像</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <!-- 节点信息上导航 -->
    <div class="stu-table">
      <el-table
        :data="tableData"
        style="width: 100%"
        v-loading="loading"
      >
        <el-table-column
          prop="actor_name"
          label="姓名"
          width="100"
          v-if="tableData[0].actor_name"
          key="actor_name"
        >
          <template slot-scope="scope">
            {{scope.row.actor_name}}
          </template>
        </el-table-column>
        <el-table-column
          prop="name"
          label="姓名"
          width="100"
          v-if="tableData[0].name"
          key="name"
        >
          <template slot-scope="scope">
            {{scope.row.name}}
          </template>
        </el-table-column>
        <el-table-column
          prop="actor_id"
          label="学号"
          v-if="tableData[0].actor_id"
          key="actor_id"
        >
        </el-table-column>
        <el-table-column
          prop="actor_sex"
          label="性别"
          v-if="tableData[0].actor_sex"
        >
        </el-table-column>
        <el-table-column
          prop="actor_birthday"
          label="出生年月"
          v-if="tableData[0].actor_birthday"
        >
        </el-table-column>
        <el-table-column
          prop="major"
          label="专业"
          v-if="tableData[0].major"
        >
        </el-table-column>
        <el-table-column
          prop="study_location"
          label="上课地址"
          v-if="tableData[0].study_location"
        >
        </el-table-column>
        <el-table-column
          label="操作"
          width="120"
          fixed="right"
        >
          <template slot-scope="scope">
            <el-button
              type="primary"
              size="small"
              @click="goDetail(scope.row.actor_id)"
            >详情</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div
        class="block"
        style="text-align:center;margin-top:20px;"
      >
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="100"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        loading: true,
        type: 'sample',
        page: 1,
        page_size: 10,
        currentPage: 1,
        total: 0,
        tableData: [{
          tableData: null
        }]
      }
    },
    filters: {
      nameFormat(val) {
        if (val.length === 2) {
          return val[0] + '*'
        } else if (val.length === 3) {
          return val[0] + '**'
        } else {
          return val[0] + '***'
        }
      }
    },
    watch: {
      '$route'(to, from) {
        // data数据操作
        this.type = this.$store.state.type
        this.getData()
      }
    },
    created() {
      this.type = this.$store.state.type
      this.getData()
    },
    methods: {
      handleSizeChange(val) {
        this.page_size = val
        this.getData()
      },
      handleCurrentChange(val) {
        this.page = val
        this.getData()
      },
      getData() {
        this.loading = true
        let url = ""
        if (this.type === 'portrait') {
          url = `/${this.type}/predict_std/`
        } else if (this.type === 'sample') {
          url = `/${this.type}/student_info/`
        }
        this.$http.get(url, {
          params: {
            page: this.page,
            page_size: this.page_size
          }
        }).then(response => {
          this.tableData = response.data.results
          this.total = response.data.count
          this.loading = false
        })
      },
      goDetail(id) {
        this.$router.push({
          path: '/home/stuDet',
          query: {
            id: id
          }
        })
      }
    }
  }

</script>

<style
  lang="scss"
  scoped
>
  .sample-index {
    height: 100%;

    .stu-table {
      padding: 20px;
      height: calc(100% - 40px);
      overflow-y: scroll;
    }
  }

</style>
